<template>
  <div class="add-user">
    <el-dialog title="修改密码" :visible.sync="visible" width="600px" @close="formCancel()">
      <el-form v-if="visible" ref="passwordForm" :model="formData" :rules="rules" label-position="right" label-width="80px">
        <el-form-item label="账号">
          <el-input v-model="formData.account" type="text" placeholder="请输入角色名称" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="新密码" prop="pass">
          <el-input v-model="formData.pass" type="password" placeholder="请输入密码" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPass">
          <el-input v-model="formData.confirmPass" type="password" placeholder="请再次输入密码" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item style="margin-top:20px;width: 100%;display: flex;justify-content: center;">
          <el-button style="margin-right:20px;" @click="formCancel">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { SetPassword } from '@/api/system';
import { passEncrypt } from '@/utils/encrypt'
export default {
  data() {
    const validConfirm = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入确认密码！'))
      } else if (value !== this.formData.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      formData: {},
      visible: false,
      rules: {
        pass: [
          {
            required: true, message: '请输入密码！', trigger: 'blur'
          },
          {
            pattern: /^(?=.*[0-9])(?=.*[a-zA-Z])([0-9A-Za-z_\W]){6,12}$/, message: '密码必须包含数字和字母，可包含特殊字符，长度为6-12位！', trigger: 'blur'
          }
        ],
        confirmPass: [
          {
            required: true, message: '请输入确认密码！', trigger: 'blur'
          },
          {
            validator: validConfirm, trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    show(row) {
      this.formData = {
        account: row.account,
        pass: '',
        confirmPass: ''
      }
      this.visible = true
      this.$refs['editForm'].clearValidate();
    },
    formCancel() {
      this.visible = false
    },
    submit() {
      this.$refs.passwordForm.validate((valid) => {
        if (valid) {
          // this.formData.pass = passEncrypt(this.formData.pass)
          // this.formData.confirmPass = passEncrypt(this.formData.confirmPass)
          SetPassword(this.formData).then(res => {
            res.success && this.$message({
              message: res.msg,
              type: 'success'
            })
            this.visible = false
            this.$emit('reload')
          })
        }
      })
    }
  }
}
</script>
<style>
</style>
